<!-- subpkg_archive/form/index.vue -->
<script setup lang="ts">
 import { ref } from 'vue'
 import type { UniForms } from '@uni-helper/uni-types'
 import type { PatientParams} from '@/types/patient'
 import { addPatientApi, patientDetailApi, updatePatientApi } from '@/apis/patient'

 const props = defineProps<{ id: string }>()
const getPatientDetail=async () =>{
    // 是否存在患者 ID
    if (!props.id) return
    // 有ID说明当前处于编辑状态，修改页面标题
    uni.setNavigationBarTitle({ title: '编辑患者' })
  
    // 患者详情接口
    const data = await patientDetailApi(props.id)
  
    // 渲染患者信息
    formData.value = data
  }
  // 查询患者信息
  getPatientDetail()

 
  // 1. 表单数据
  const formData = ref<PatientParams>({
    name: '',
    idCard: '',
    gender: 1,
    defaultFlag: 1,
  })

  // 2. 数据校验
  const formRef = ref<UniForms | null>(null)
  const formRules = {
  name: {
    rules: [
      { required: true, errorMessage: '请填写患者姓名' },
      {
        pattern: '^[\u4e00-\u9fa5]{2,5}$',
        errorMessage: '患者姓名为2-5位中文',
      },
    ],
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请输入身份证号' },
      {
        pattern:
          '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
        errorMessage: '身份证号格式不正确',
      },
    ],
  },
  gender: {
    rules: [
      { required: true, errorMessage: '请勾选患者姓名' },
      {
        // @ts-ignore
        validateFunction:  (rule, value, data, callback) => {
          // 1. 取出身份证号码中的倒数第二位
          if (data.idCard.slice(16, 17) % 2 !== value){
            callback('身份证性别选择错误')
            return false
          }
          return true
        }
      }
    ],
  },
}

  const changeDefaultFlag = (e: UniHelper.SwitchOnChangeEvent)=>{
  formData.value.defaultFlag = e.detail.value ? 1 : 0
    }

  const onSubmit = async ()=>{
    try {
    await formRef.value?.validate()
    if (props.id) {
      // 编辑
      const { name, idCard, defaultFlag, gender } = formData.value
      const params: PatientParams = { id: props.id, name, idCard, defaultFlag, gender }
      await updatePatientApi(params)
    }else{
      await addPatientApi(formData.value)
    }
    uni.showToast({title: '添加患者成功!', icon: 'none'})
    uni.navigateBack()
  } catch (error) {
    console.log(error) 
  }
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms :model="formData" :rules="formRules" ref="formRef" border label-width="220rpx">
        <uni-forms-item label="患者姓名" name="name">
           <!--@vue-ignore  -->
          <uni-easyinput v-model="formData.name" placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }" :input-border="false" :clearable="false" placeholder="请填写真实姓名" />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <!-- @vue-ignore -->
          <uni-easyinput v-model="formData.idCard" placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }" :input-border="false" :clearable="false" placeholder="请填写身份证号" />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox v-model="formData.gender" selectedColor="#16C2A3" :localdata="[
            { text: '男', value: 1 },
            { text: '女', value: 0 },
          ]" />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch :checked="formData.defaultFlag === 1" color="#20c6b2" style="transform: scale(0.7)"
              @change="changeDefaultFlag" />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="onSubmit">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>